<script setup lang="ts">

const { modelValue } = defineProps<{
   modelValue: boolean
}>();

const emits = defineEmits<{
   (e: "update:modelValue", flag: boolean): void
}>();

const change = () => {
   emits("update:modelValue", !modelValue);
};

</script>

<template>
   <div class="login-head">
      <h3>{{ modelValue === true ? "短信验证码" : "密码" }}登录</h3>
      <a @click="change">
         <span>{{ modelValue === true ? "密码" : "短信验证码" }}登录</span>
         <van-icon name="arrow"></van-icon>
      </a>
   </div>
</template>

<style scoped lang="scss">
.login-head {
   display: flex;
   padding: 30px 30px 25px;
   justify-content: space-between;
   align-items: center;
   line-height: 1;

   h3 {
      font-weight: normal;
      font-size: 20px;
   }

   a {
      font-size: 15px;
      padding-top: 10px;
   }
}
</style>
